<template>
    <div class="m-home">
        <div class="page-home row-content am-cf">
            <!-- 商城统计 -->
            <div class="row">
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 am-margin-bottom">
                    <div class="widget am-cf">
                        <div class="widget-head">
                            <div class="widget-title">商城统计</div>
                        </div>
                        <div class="widget-body am-cf">
                            <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
                                <div class="widget-card card__blue am-cf">
                                    <div class="card-header">商品总量</div>
                                    <div class="card-body">
                                        <div class="card-value">63</div>
                                        <div class="card-description">当前商品总数量</div>
                                        <span class="card-icon fa fa-gift"></span>
                                    </div>
                                </div>
                            </div>

                            <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
                                <div class="widget-card card__red am-cf">
                                    <div class="card-header">用户总量</div>
                                    <div class="card-body">
                                        <div class="card-value">1,634</div>
                                        <div class="card-description">当前用户总数量</div>
                                        <span class="card-icon fa fa-user-o"></span>
                                    </div>
                                </div>
                            </div>

                            <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
                                <div class="widget-card card__violet am-cf">
                                    <div class="card-header">订单总量</div>
                                    <div class="card-body">
                                        <div class="card-value">148</div>
                                        <div class="card-description">已付款订单总数量</div>
                                        <span class="card-icon fa fa-cart-plus"></span>
                                    </div>
                                </div>
                            </div>

                            <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
                                <div class="widget-card card__primary am-cf">
                                    <div class="card-header">评价总量</div>
                                    <div class="card-body">
                                        <div class="card-value">0</div>
                                        <div class="card-description">订单评价总数量</div>
                                        <span class="card-icon fa fa-comments-o"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 实时概况 -->
            <div class="row">
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 am-margin-bottom">
                    <div class="widget am-cf">
                        <div class="widget-head">
                            <div class="widget-title">实时概况</div>
                        </div>
                        <div class="widget-body am-cf">
                            <div class="am-u-sm-6 am-u-md-6 am-u-lg-3">
                                <div class="widget-outline dis-flex flex-y-center">
                                    <div class="outline-left">
                                        <img
                                            src=""
                                            alt
                                        >
                                    </div>
                                    <div
                                        class="outline-right dis-flex flex-dir-column flex-x-between"
                                    >
                                        <div
                                            style="color: rgb(102, 102, 102); font-size: 1.3rem;"
                                        >销售额(元)</div>
                                        <div
                                            style="color: rgb(51, 51, 51); font-size: 2.4rem;"
                                        >1351.00</div>
                                        <div
                                            style="color: rgb(153, 153, 153); font-size: 1.2rem;"
                                        >昨日：974.00</div>
                                    </div>
                                </div>
                            </div>
                            <div class="am-u-sm-6 am-u-md-6 am-u-lg-3">
                                <div class="widget-outline dis-flex flex-dir-column flex-x-between">
                                    <div style="color: rgb(102, 102, 102); font-size: 1.2rem;">支付订单数</div>
                                    <div style="color: rgb(51, 51, 51); font-size: 2.4rem;">106</div>
                                    <div style="color: rgb(153, 153, 153); font-size: 1.2rem;">昨日：76</div>
                                </div>
                            </div>
                            <div class="am-u-sm-6 am-u-md-6 am-u-lg-3">
                                <div class="widget-outline dis-flex flex-y-center">
                                    <div class="outline-left">
                                        <img
                                            src=""
                                            alt
                                        >
                                    </div>
                                    <div
                                        class="outline-right dis-flex flex-dir-column flex-x-between"
                                    >
                                        <div
                                            style="color: rgb(102, 102, 102); font-size: 1.3rem;"
                                        >新增用户数</div>
                                        <div style="color: rgb(51, 51, 51); font-size: 2.4rem;">327</div>
                                        <div
                                            style="color: rgb(153, 153, 153); font-size: 1.2rem;"
                                        >昨日：238</div>
                                    </div>
                                </div>
                            </div>
                            <div class="am-u-sm-6 am-u-md-6 am-u-lg-3">
                                <div class="widget-outline dis-flex flex-dir-column flex-x-between">
                                    <div style="color: rgb(102, 102, 102); font-size: 1.2rem;">下单用户数</div>
                                    <div style="color: rgb(51, 51, 51); font-size: 2.4rem;">69</div>
                                    <div style="color: rgb(153, 153, 153); font-size: 1.2rem;">昨日：34</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 近七日交易走势 -->
            <div class="row">
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 am-margin-bottom">
                    <div class="widget am-cf">
                        <div class="widget-head">
                            <div class="widget-title">实时概况</div>
                        </div>
                        <div class="widget-body am-cf">
                            <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
                              <line-chart :chart-data="lineChartData"/>
                            </el-row>
                        </div>
                    </div>
                </div>
            </div>
            

            <div class="row">
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                    <div class="help-block am-text-center">
                        <small>本页面数据为随机模拟，并非真实数据，仅作示意。</small>
                    </div>
                    <div class="help-block am-text-center">
                        <small>萤火科技版权所有，官方QQ：1361545828</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

import LineChart from './LineChart'

export default {
    name: 'homeIndex',
    components: {
      LineChart
    },
    data() {
      return {
        lineChartData: lineChartData.newVisitis
      }
    },
    methods: {
      handleSetLineChartData(type) {
        this.lineChartData = lineChartData[type]
      }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .m-home{
    .page-home .widget-card .card-icon{top:40px;}
  }
</style>
